{extend name="base" /}

{block name="header"}
<div class="admin_header_{$skin_name|default='default'} clearfix">
  <div class="title"><i></i>{$title|default=""}</div>
  <div class="action">
    <b></b>
    <div class="layui-btn-group layui-btn-group-only">
      <a class="layui-btn  layui-btn-disabled layui-btn-sm "><i class="fa fa-reply"></i> 返 回 </a>
    </div>
  </div>
</div>
{/block}
{block name="main"}

<div class="layui-btn-group" {empty name="$show"} style="display: none;" {else /} style="display: block;"{/empty}>
    <a href="{:url('admin/system_config/add')}" class="layui-btn layui-btn-primary"><i class="layui-icon" style="color: #ffffff;">&#xe608;</i>添加配置项</a>
</div>
<div class="layui-form">
  <table class="layui-table" lay-even="" lay-skin="row" lay-size="sm">
    <colgroup>
      <col width="20">
      <col width="50">
      <col width="80">
      <col width="80">
      <col width="50">
      <col width="350">
      <col width="150">
      <col width="150">
    </colgroup>
    <thead>
    <tr>
      <th>排序</th>
      <th>分组名称</th>
      <th>标题</th>
      <th>配置项类型</th>
      <th>变量字段</th>
      <th>数据值</th>
      <th>额外参数</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <form id="config_form">
      {php}$textA=0;$textB=0;{/php}
    {volist name="config_list" id="vo"}
    <tr>
      <td><input type="text" name="orders[]" value="{$vo.orders}" style="width: 20px;" class="orders"><input type="hidden" name="id[]" value="{$vo.id}"></td>
      <td>{$vo.group}</td>
      <td>{$vo.title}</td>
      <td>{$vo.type}</td>
      <td>{$vo.vari}</td>
        {php}$value=json_decode($vo['options'], true);{/php}
        {if $vo.type=='checker'}
         <td><input type="checkbox" name="{$vo.vari}"  lay-skin="switch" lay-text="ON|OFF" lay-filter="switchStatus" value="{$vo.id}" {notempty name="$vo.value"}<?php if($vo['value'] ==1){ echo "checked=''";}?>{/notempty}>
         </td>
         {elseif $vo.type=='radio'}
        <td>
         {foreach $value as $key=>$key_value }
        <input type="radio" name="{$vo.vari}" lay-skin="switch" title="{$key_value}" lay-filter="radioStatus" value="{$vo.id}&value={$key}" {notempty name="$vo.value"}{eq name="$vo.value" value="$key"}checked=""{/eq}{/notempty}>
         {/foreach}
         </td>
          {elseif $vo.type=='image'}
      {if $vo.value==0 }
      <td><a href="__ADMIN__/images/default_headimg.png" class="tooltip"><img src="__ADMIN__/images/default_headimg.png" width="20" height="20"></a></td>
      {else /}
      <td><a href="{$vo.value|get_url}" class="tooltip"><img src="{$vo.value|get_url}" width="20" height="20"></a></td>
      {/if}
          {elseif $vo.type=='checkbox'}
          {php}$box=explode(',',$vo['value']);{/php}
         <td>
         {foreach $value as $key=>$key_value }
         <input type="checkbox" name="{$vo.vari}" title="{$key_value}" lay-filter="checkboxStatus" value="{$vo.id}&value={$key}" {notempty name="$vo.value"}<?php if(in_array($key,$box)){ echo "checked=''";} ?> {/notempty}>
        {/foreach}
         </td>
        {elseif $vo.type=='textarea'}
        {php}$textA =$textA+1;{/php}
      <td> <input name="{$vo.vari}" id="{$vo.id}" value="{$vo.value}" placeholder="{$vo.value}" class="layui-input layui-textarea textareaValue{$textA}" type="textarea"></td>
      {else}
      {php}$textB =$textB+1;{/php}
       <td> <input name="{$vo.vari}" id="{$vo.id}" value="{$vo.value}" placeholder="{$vo.value}" class="layui-input textValue{$textB}" type="text"></td>
      {/if}

      <td>{$vo.options}</td>
      <td class="operation-menu">
        <a href="{:url('admin/system_config/edit',['id'=>$vo.id])}" class="layui-btn and-bg-{$skin_name|default='default'} layui-btn-xs"><i class="layui-icon"></i></a>
        <a href="javascript:;" class="layui-btn and-bg-{$skin_name|default='default'} layui-btn-xs delete" id="{$vo.id}"><i class="layui-icon"></i></a>
      </td>
    </tr>
    {/volist}
     </form>
    </tbody>
  </table>
  </div>


  <div class="layui-btn-group">
    <button class="layui-btn layui-btn-sm and-bg-{$skin_name}" lay-submit lay-filter="config_orders">更新排序</button>
    {$config_list->render()|raw}
  </div>

{/block}

{block name="script"}
<script type="text/javascript">
  $(function(){
    var x = 10;
    var y = 20;
    $(".tooltip").mouseover(function(e){
      var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='预览图' height='200'/>"+"<\/div>"; //创建 div 元素
      $("body").append(tooltip);  //把它追加到文档中
      $("#tooltip")
              .css({
                "top": (e.pageY+y) + "px",
                "left":  (e.pageX+x)  + "px"
              }).show("fast");    //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
      $("#tooltip").remove();  //移除
    }).mousemove(function(e){
      $("#tooltip")
              .css({
                "top": (e.pageY+y) + "px",
                "left":  (e.pageX+x)  + "px"
              });
    });
  });
  $('.delete').click(function(){
    var id = $(this).attr('id');
    layer.confirm('确定要删除?', function(index) {
      $.ajax({
        url:"{:url('admin/system_config/delete')}",
        data:{id:id},
        success:function(res) {
          layer.msg(res.msg);
          if(res.code == 1) {
            setTimeout(function(){
              location.href = res.url;
            },1500)
          }
        }
      })
    })
  })
</script>
<script type="text/javascript">
  layui.use(['form'],function(){
    var form = layui.form
            ,jq = layui.jquery;
    form.on('submit(config_orders)', function(data) {
      $.ajax({
        url:"{:url('admin/system_config/orders')}",
        data:$('#config_form').serialize(),
        type:'post',
        async: false,
        success:function(res) {
          if(res.code == 1) {
            layer.alert(res.msg, function(index){
              location.href = res.url;
            })
          } else {
            layer.msg(res.msg);
          }
        }
      });
      return false;
    });
    //jq('.btable-paged').eq(1).hide();
    var status=0;
    form.on('switch(switchStatus)', function(data){
      loading = layer.load(2, {
        shade: [0.2,'#000']
      });
      if(data.elem.checked){
        status=1;
      }else{
        status=0;
      }
      var url="{:url('admin/system_config/update_value')}?id="+data.value+"&value="+status+"&type=checker";

      jq.get(url,function(data){

        if(data.code == 200){
          layer.close(loading);
          layer.msg(data.msg, {icon: 1, time: 1000}, function(){
            //  location.reload();
          });
        }else{
          layer.close(loading);
          layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
        }
      });
      return false;
    });
    form.on('radio(radioStatus)', function(data){
      var url="{:url('admin/system_config/update_value')}?id="+data.value+"&type=radio";
      jq.get(url,function(data){

        if(data.code == 200){
          layer.close(loading);
          layer.msg(data.msg, {icon: 1, time: 1000}, function(){
            //  location.reload();
          });
        }else{
          layer.close(loading);
          layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
        }
      });
      return false;
    });
    form.on('checkbox(checkboxStatus)', function(data){
      var url="{:url('admin/system_config/update_value')}?id="+data.value+"&type=checkbox";

      jq.get(url,function(data){

        if(data.code == 200){
          layer.close(loading);
          layer.msg(data.msg, {icon: 1, time: 1000}, function(){
            //  location.reload();
          });
        }else{
          layer.close(loading);
          layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
        }
      });
      return false;
    });

  });
  var textValue;
  var textareaValue;

  <?php for($i=0;$i<21;$i++){echo '
    $(document).ready(function(){
      $(".textValue'.$i.'").focus(function(){
        textValue = $(this).val();
      });
    });
  $(document).ready(function(){
  $(".textValue'.$i.'").blur(function(){
    if( textValue != $(this).val()){
      $.get("'.url('admin/system_config/update_value').'?id="+$(this).attr("id")+"&value="+$(this).val()+"&type=text",function(data,status){
        if(data.code == 200){
          layer.close(loading);
          layer.msg(data.msg, {icon: 1, time: 1000}, function(){
            //  location.reload();
          });
        }else {
          layer.close(loading);
          layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
        }
      });
    }
  });
  });';
    }?>

  <?php for($i=0;$i<21;$i++){echo '
    $(document).ready(function(){
      $(".textareaValue'.$i.'").focus(function(){
        textareaValue = $(this).val();
      });
    });
    $(document).ready(function(){
      $(".textareaValue'.$i.'").blur(function(){
        if( textareaValue != $(this).val()){
          $.post("'.url('admin/system_config/update_value').'", {
            id:$(this).attr("id"),
            value:$(this).val(),
            type:"textarea"
          },function(data,status){
            if(data.code == 200){
              layer.close(loading);
              layer.msg(data.msg, {icon: 1, time: 1000}, function(){
                //  location.reload();
              });
            }else {
              layer.close(loading);
              layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
            }
          });
        }
      });
    });';
  }?>
</script>
{/block}